<template>
	<view class="container">
		<view class="search-bar">
			<view class="search-bar-back" @click="goBack">
				<u-icon name="arrow-leftward" color="#343434" size="44"></u-icon>
			</view>
			<u-form :model="searchForm" class="search-bar-input">
				<u-form-item>
					<u-input :placeholder="searchForm.defaultKey" v-model="searchForm.key" />
				</u-form-item>
			</u-form>
		</view>
		<!-- 热搜 -->
		<view class="searchHot" style="padding-top: 160rpx;">
			<view class="searchHot-title">
				热搜榜
			</view>
			<view class="searchHot-items">
				<u-read-more class="searchHot-items-box" ref="uReadMore" show-height="360" close-text='展开更多热搜' :toggle="true">
					<view class="aaa">
						<view class="searchHot-items-item" v-for="(item,index) in searchHotList" :key='index' @click="playHot(item)">
							<text class="index" :class="{'index-active':index==0||index==1||index==2?true:false}">{{index + 1}}</text>
							<text :class="{'text-active':index==0||index==1||index==2?true:false}">{{item.searchWord}}</text>
							<u-image style="margin-left: 10rpx;display: inline-block;" width="15%" mode="widthFix" v-if="item.iconUrl" :src="item.iconUrl"></u-image>
						</view>
					</view>
				</u-read-more>

			</view>
		</view>
		<!-- 搜索推荐列表 -->
		<view class="searchSuggestList" v-show="searchSuggestList.length">
			<u-cell-group>
				<u-cell-item v-for="item in searchSuggestList" :key='item.keyword' icon="search" :title="item.keyword" :arrow="false"
				 @click='searchByItem(item.keyword)'></u-cell-item>
			</u-cell-group>
		</view>
		<!-- 搜索的歌单 -->
		<view class="searchSuggestList" v-show="songList.length">
			<scroll-view scroll-y="true" style="height: 560px;">
				<u-cell-group title="单曲">
					<u-cell-item v-for="item in songList" :key='item.id' :title="item.name" :label='item.al.name' :arrow="false" @click='playMusic(item)'>
						<u-icon slot="right-icon" size="48" name="play-circle"></u-icon>
					</u-cell-item>
				</u-cell-group>
			</scroll-view>
		</view>
		<!-- 音乐底部栏 -->
		<musicBar :bgcolor='`#fff`' :playListId = 'playListId' :musicInfo='musicInfo' v-if='musicInfo' />
	</view>
</template>

<script>
	import musicBar from "@/components/musicBar.vue"
	export default {
		components: {
			musicBar
		},
		data() {
			return {
				searchForm: {
					key: '',
					defaultKey: ''
				},
				// 搜索建议列表
				searchSuggestList: [],
				// 歌曲列表
				songList: [],
				// 热搜榜
				searchHotList: [],
				musicInfo: null,
				// 歌单 ID
				playListId: ''
			}
		},
		watch: {
			'searchForm.key': function(newVal) {
				if (newVal == '') {
					this.songList = [];
				}
				this.getSearchSuggest();
			}
		},
		onLoad() {
			this.getSearchKeyWords();
			this.getSearchHot();
		},
		methods: {
			playMusic(val){
				console.log(val);
				this.musicInfo = val;
			},
			playHot(val) {
				this.searchForm.key = val.searchWord;
				this.searchByItem(val.searchWord, 1)
			},
			// 根据搜索建议列表项精确搜索,type: 搜索类型；默认为 1 即单曲 , 取值意义 : 1: 单曲, 10: 专辑, 100: 歌手, 1000: 歌单, 1002: 用户, 1004: MV, 1006: 歌词, 1009: 电台, 1014: 视频, 1018:综合
			searchByItem(keyword, type = 1) {
				this.myRequest({
					url: this.api.cloudsearch,
					data: {
						keywords: keyword,
						type: type
					}
				}).then((res) => {
					console.log(res);
					this.searchSuggestList = [];
					this.songList = res.data.result.songs;
				}).catch((err) => {
					console.log(err);
				})
			},
			// 获取搜索建议
			getSearchSuggest() {
				this.myRequest({
					url: this.api.searchSuggest,
					data: {
						keywords: this.searchForm.key,
						type: 'mobile'
					}
				}).then((res) => {
					this.searchSuggestList = res.data.result.allMatch;
				}).catch((err) => {
					this.searchSuggestList = [];
				})
			},
			// 获取默认搜索关键词
			getSearchKeyWords() {
				this.myRequest({
					url: this.api.searchDefault
				}).then((res) => {
					this.searchForm.defaultKey = res.data.data.realkeyword;
				})
			},
			// 获取热搜榜
			getSearchHot() {
				this.myRequest({
					url: this.api.searchHot
				}).then((res) => {
					console.log(res);
					this.searchHotList = res.data.data;
					this.$nextTick(() => {
						this.$refs.uReadMore.init();
					})
				})
			},
			goBack() {
				uni.reLaunch({
					url: '/pages/look/look'
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	.container {
		width: 100%;
		height: 100%;
		font-size: 14px;
		overflow: hidden;
		padding: 30rpx;
		position: relative;
		background-color: #fff;
		position: relative;

		.search-bar {
			display: flex;
			justify-content: space-between;
			align-items: center;
			position: fixed;
			top: -20rpx;
			left: 30rpx;
			z-index: 100;
			width: calc(100% - 60rpx);
			height: 180rpx;
			padding-top: 100rpx;
			background-color: #fff;

			.search-bar-back {
				width: 10%;

			}

			.search-bar-input {
				width: 86%;
			}
		}


		.searchSuggestList {
			width: 90%;
			position: absolute;
			top: 180rpx;
			left: 5%;
		}

		.searchHot {
			.searchHot-title {
				font-weight: bolder;
				border-bottom: 1px solid #eee;
				height: 80rpx;
				line-height: 80rpx;
				margin-top: 20rpx;
			}

			.searchHot-items {
				margin-top: 20rpx;

				.searchHot-items-box {
					width: 100%;

					.aaa {
						display: flex;
						flex-wrap: wrap;
						justify-content: space-around;
					}

					.searchHot-items-item {
						width: 50%;
						height: 60rpx;
						line-height: 60rpx;
						text-indent: 0em;

						.index {
							width: 40rpx;
							display: inline-block;
							margin-right: 20rpx;
							text-align: left;
						}

						.index-active {
							font-weight: bolder;
							color: red;
						}

						.text-active {
							font-weight: bolder;
							color: black;
						}
					}
				}


			}
		}






	}
</style>
